
# Projeto de Interface

<span style="color:red">Pré-requisitos: <a href="2-Especificação do Projeto.md"> Documentação de Especificação</a></span>

Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).

 Apresente as principais interfaces da plataforma. Discuta como ela foi elaborada de forma a atender os requisitos funcionais, não funcionais e histórias de usuário abordados nas <a href="2-Especificação do Projeto.md"> Documentação de Especificação</a>.

## User Flow
<img width="1152" alt="User Flow" src="https://user-images.githubusercontent.com/102487978/197672297-771344c5-ba5b-4254-98da-efae53b24803.png">

## Wireframes

### Página inicial
![image](https://user-images.githubusercontent.com/98277143/194729727-afdb3077-b3f8-465b-a7d4-2b12f7e4e735.png)

Ao abrir o site o usuário encontrará uma mensagem de boas-vindas e três botões que ao serem clicados apresentará uma uma rolagem para uma breve apresentação no local (Vide itens na figura acima). No menu do canto superior direito, encontremos um menu drop-down em Tratamentos e Transtornos que levará as páginas de cada trastorno, este menu junto do logo e rodapé estarão presentes em todas as páginas do site.
No lado direito do centro da página apresentaremos um container com notícias e eventos pertinentes ao tema de bem estar mental.
No rodapé terá links para rede sociais do projetos e links repetidos do menu e breve informação de contato do site.

### Informações sobre os transtornos
![image](https://user-images.githubusercontent.com/98277143/194729967-aa995dee-02b9-4a9b-8f9b-2e63beaeac72.png)

Neste página iremos aprofundar sobre o transtorno (O design será o mesmo para depressão, transtorno bipolar e ansiedade) com informações e também será exibo links externos para vídeos, pesquisas e nóticias. No final da página o usuário poderá acessar rapidamente a página que fala sobre tratamento.

### Informações sobre os tratamentos
![image](https://user-images.githubusercontent.com/98277143/194729983-420c3d33-0a9a-4f4a-b777-4c9baca8e108.png)

Ao selecionar o transtorno na opção de tratamento o usuário terá apresentação de tratamentos e textos sobre o mesmo, assim como um campo para comentários e compartilhar suas experiências com outros usuários.

### Informações sobre contato do site e mantedores
![image](https://user-images.githubusercontent.com/98277143/194729993-44bfc06d-51f7-41a9-b3f2-cb6780aeb185.png)

Informação com mais detalhes do que a presente no rodapé do site, com email para sugestões e informação da organização.
